<template>
  <div>
    <div class="cont">
      <!-- 搜索 -->
      <div class="search">
        <input
          class="inp"
          v-model="ele"
          type="text"
          placeholder="用户编号/用户地址"
        />
        <el-button @click="search()">搜索</el-button>
      </div>
      <!-- 下方按钮 -->
      <div class="top">
        <button @click="dialogFormVisible = true">新增</button>
        <button
          @click=" (dialogFormVisible1 = true)"
          :disabled="disabled"
          :style="{ 'background-color': color, 'border-color': border }"
        >
          挂接
        </button>
        <!-- <button>修改</button> -->
        <button @click="open()" :disabled='disabled' :style="{'background-color':color,'border-color':border}">删除</button>
      </div>
      <!-- 下方表格 -->
      <div class="down">
        <el-table
          ref="multipleTable"
          :data="tableData3"
          tooltip-effect="dark"
          style="width: 100%"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="55"> </el-table-column>
          <el-table-column prop="custId" label="用户编号" align="center">
          </el-table-column>
          <el-table-column prop="custName" label="用户名称" align="center">
          </el-table-column>
          <el-table-column
            prop="custAddr"
            label="用电地址"
            show-overflow-tooltip
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="custTypeString"
            label="用户类型"
            show-overflow-tooltip
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="manageCompanyString"
            label="管理单位"
            show-overflow-tooltip
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="electrovalenceString"
            label="电价"
            show-overflow-tooltip
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="createTime"
            label="立户日期"
            show-overflow-tooltip
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="ammeterId"
            label="电表号"
            show-overflow-tooltip
            align="center"
          >
          </el-table-column>
          <!-- <el-table-column
            prop="status"
            label="状态"
            width="100"
            :filter-method="filterTag"
            filter-placement="bottom-end"
            align="center"
          >
            <template slot-scope="scope">
              <el-tag
                :type="scope.row.status === 1 ? 'success' : 'danger'"
                v-text="scope.row.status === 1 ? '正常' : '异常'"
                disable-transitions
                >{{ scope.row.status }}</el-tag
              >
            </template>
          </el-table-column> -->
        </el-table>
        
        <!-- 添加弹窗 -->
        <div class="add">
          <el-dialog title="新增" :visible.sync="dialogFormVisible">
            <el-form
              :model="ruleForm"
              :rules="rules"
              ref="ruleForm"
              label-width="100px"
              class="demo-ruleForm"
            >
              <el-form-item label="用户名称" prop="name">
                <el-input v-model="ruleForm.name"></el-input>
              </el-form-item>
              <el-form-item label="用电地址" prop="custAddr">
                <el-input v-model="ruleForm.custAddr"></el-input>
              </el-form-item>
              <el-form-item label="用电类型" >
                  <el-select
                    v-model="ruleForm.custType"
                    placeholder="请选择用电类型"
                  >
                    <el-option
                      v-for="item in table2"
                      :key="item.id"
                      :label="item.dictLabel"
                      :value="item.dictValue"
                    ></el-option>
                  </el-select> </el-form-item
              >
              <el-form-item label="管理单位" >
                  <el-select
                    v-model="ruleForm.manageCompany"
                    placeholder="请选择管理单位"
                  >
                    <el-option
                      v-for="item in table1"
                      :key="item.id"
                      :label="item.dictLabel"
                      :value="item.dictValue"
                    ></el-option>
                  </el-select> </el-form-item
              >
              <el-form-item label="电价" >
                  <el-select
                    v-model="ruleForm.electrovalence"
                    placeholder="请选择电价"
                  >
                    <el-option
                      v-for="item in table3"
                      :key="item.id"
                      :label="item.dictLabel"
                      :value="item.dictValue"
                    ></el-option>
                  </el-select> </el-form-item
              >
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="dialogFormVisible = false">取 消</el-button>
              <el-button
                type="primary"
                @click="(dialogFormVisible = false), submitForm('ruleForm')"
                >确 定</el-button
              >
            </div>
          </el-dialog>
        </div>
        <!-- 分页 -->
        <div class="block">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[5, 10, 20, 30, 40]"
            :page-size="sizes"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          >
          </el-pagination>
        </div>
        <!-- 挂接弹窗 -->
        <div class="gua">
          <el-dialog title="挂接" :visible.sync="dialogFormVisible1">
            <div class="top"></div>
            <div class="box">
              <div class="left">
                <div class="title">查询电表</div>
                <hr />
                <input
                  class="inps"
                  v-model="elegua"
                  type="text"
                  placeholder="用户编号/用户地址"
                />
                <button @click="guasearch()">搜索</button>

                <div class="out" v-for="(item,index) in datas" :key="index">
                  <input :id='index' type="radio" name="aa" @input="xuan(item, $event)" />
                  <label :for='index'>
                    <div class="big">
                    <div class="tops">
                      <div>{{ item.ammeterId }}</div>
                    </div>
                    <div class="center">
                      <div class="one">电表类型:{{ item.connection }}</div>
                      <div class="two">厂家:{{ item.companyType }}</div>
                      <div class="three">通讯方式:{{ item.message }}</div>
                    </div>
                    <div class="bottom">
                      <div class="gui">规约:{{ item.protocols }}</div>
                      <div class="id">ID:{{ item.ammeterId }}</div>
                    </div>
                  </div>
                  </label>
                  
                </div>
              </div>
            </div>
            <div slot="footer" class="dialog-footer">
              <el-button @click="dialogFormVisible1 = false">取 消</el-button>
              <el-button
                type="primary"
                @click="(dialogFormVisible1 = false), customerGua()"
                >确 定</el-button
              >
            </div>
          </el-dialog>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  Customer,
  CustomerAdd,
  CustomerDel,
  CustomerGua,
  CustomerMount,
  Dict,
  
} from "../request/api";
export default {
  data() {
    return {
      tableData3: [],
      table1:[],
      table2:[],
      table3:[],
      dialogFormVisible: false,
      dialogFormVisible1: false,
      // dialogFormVisible2: false,
      ele: "",
      elegua:"",
      newArr: "",
      datas: "",
      ruleForm: {
        name: "",
        custAddr: "",
        custType: "",
        manageCompany: "",
        electrovalence: "",
      },
      rules: {
        name: [{ required: true, message: "请输入用户名称", trigger: "blur" }],
        custAddr: [
          { required: true, message: "请输入用电地址", trigger: "blur" },
        ],
        custType: [
          { required: true, message: "请输入用户类型", trigger: "change" },
        ],
        manageCompany: [
          { required: true, message: "请输入管理单位", trigger: "change" },
        ],
        electrovalence: [
          { required: true, message: "请输入电价", trigger: "blur" },
        ],
      },
      currentPage: 1,
      total: 0,
      sizes: 10,
      sendId: "",
      customerId: "",
      disabled: true,
      color: "#e3e3e3",
      border: "#e3e3e3",
      manageCompany:"",
      custType:"",
      electrovalence:"",
      val1: null,
      val2: null,
    };
  },
  created() {
    Dict({dictType: "manageCompany"}).then((res)=>{
      console.log(res);
      this.table1 = res.data.data
      if(res.data.code ==500){
        alert("登录已过期")
        this.$router.push("/")
      }
    })
    Dict({dictType: "custType"}).then((res)=>{
      this.table2 = res.data.data
    })
    Dict({dictType: "electrovalence"}).then((res)=>{
      console.log(res);
      this.table3 = res.data.data
    })
  },
  mounted() {
    this.getGua();
    this.getList();
  },
  methods: {
    getGua() {
      CustomerGua().then((res) => {
        this.datas = res.data.data;
        console.log(res);
      });
    },
    getList() {
      Customer().then((res) => {
        console.log(res);
        this.tableData3 = res.data.data.records;
        this.total = res.data.data.total;
      });
    },
    handleSizeChange(val) {
      // console.log(val);
      this.val1 = val
      Customer({
        currentPage: this.currentPage,
        pageSize: this.val1,
      }).then((res) => {
        console.log(res);
        this.tableData3 = res.data.data.records;
        this.total = res.data.data.total;
      });
    },
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.val2 = val;
      Customer({
        currentPage: this.val2,
        pageSize: this.val1,
      }).then((res) => {
        console.log(res);
        this.tableData3 = res.data.data.records;
      });
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          CustomerAdd({
            custName: this.ruleForm.name,
            custAddr: this.ruleForm.custAddr,
            custType: this.ruleForm.custType,
            manageCompany: this.ruleForm.manageCompany,
            electrovalence: this.ruleForm.electrovalence,
          }).then((res) => {
            this.msg(res);
            this.getList();
          });
        } else {
          this.dialogFormVisible = true;
          return false;
        }
      });
    },
    handleSelectionChange(val) {
      let newArr = val.map((item) => {
        return item.id;
      });
      console.log(newArr);

      //
      let n = newArr[0];
      this.customerId = n;

      this.newArr = newArr;
      if (this.newArr.length == 1) {
        this.disabled = false;
        this.color = "white";
        this.border = "#008ecb";
      } else {
        this.disabled = true;
        this.color = "#e3e3e3";
        this.border = "#e3e3e3";
      }
    },
    search() {
      Customer({ custId: this.ele }).then((res) => {
        this.tableData3 = res.data.data.records;
      });
    },
    del() {
      let arr2 = this.newArr;
      let arr3 = arr2.toString();
      CustomerDel({ customerId: arr3 }).then((res) => {
        this.msg(res);
        this.getList();
      });
    },
    xuan(item, $event) {
      console.log(item);
      this.sendId = item.id;
    },
    customerGua() {
      CustomerMount({
        customerId: this.customerId,
        ammeterId: this.sendId,
      }).then((res) => {
        console.log(res);
        this.msg(res);
        this.getList()
        this.getGua();
      });
    },
    msg(res) {
      if (res.data.code == 0) {
        this.$message({
          message: res.data.msg,
          type: "success",
        });
      } else {
        this.$message({
          message: res.data.msg,
          type: "error",
        });
      }
    },
    guasearch(){
      CustomerGua({AmmeterId:this.elegua}).then((res)=>{
        this.datas = res.data.data;
      })
    },
    open() {
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.del()
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
      }
  },
};
</script>

<style scoped lang="less">
.cont {
  .search {
    margin-left: 300px;
    .inp {
      height: 35px;
      width: 50%;
      padding-left: 30px;
      line-height: 35px;
      background-color: #f2fafe;
      border: none;
    }
    .inp::-webkit-input-placeholder {
      color: #acdbef;
    }
  }

  width: 100%;
  max-height: 2000px;
  background-color: #fff;
  margin-top: 20px;
  // overflow: scroll;
  .top {
    margin: 20px 0 0 20px;
    display: flex;
    justify-content: flex-start;
    button {
      margin-right: 10px;
      width: 60px;
      height: 30px;
      border: 2px solid #008ecb;
      color: #008ecb;
      font-size: 12px;
      background-color: #fff;
    }
  }
  .box {
    // display: flex;
    justify-content: space-around;
    .right {
      width: 45%;
      height: 400px;
      // background-color: antiquewhite;
    }
    .left {
      // width: 45%;
      height: 400px;
      // background-color: #acdbef;
      overflow-y: scroll;
    }
    .left::-webkit-scrollbar {
      display: none;
    }
  }
}
.gua {
  .left {
    .inps {
      height: 35px;
      width: 60%;
      padding-left: 30px;
      line-height: 35px;
      background-color: #f2fafe;
      border: none;
      margin-left: 50px;
      margin-top: 10px;
      margin-bottom: 10px;
    }
    .inps::-webkit-input-placeholder {
      color: #acdbef;
    }
    button {
      height: 35px;
      width: 60px;
      background-color: #008ecb;
      color: #fff;
      border: none;
    }
    .title {
      font-weight: 700;
      font-size: 14px;
      margin-bottom: 10px;
    }
    .out {
      display: flex;
    }
    .big {
      margin: 10px 0;
      // border: 1px solid #e3e3e3;
      .tops {
        font-size: 12px;
        display: flex;
        // justify-content: start;
      }
      .center {
        font-size: 12px;
        display: flex;
        // margin: 10px 0;
        // justify-content: space-evenly;
        div {
          margin-right: 30px;
        }
      }
      .bottom {
        font-size: 12px;
        display: flex;
        div {
          margin-right: 23px;
        }
        // justify-content: space-evenly;
      }
    }
  }
  .right {
    .title {
      font-weight: 700;
      font-size: 14px;
      margin-bottom: 10px;
    }
    .show {
      margin-top: 10px;
      width: 100%;
      height: 100px;
      border: 2px dashed #e3e3e3;
      text-align: center;
      font-size: 20px;
      line-height: 100px;
    }
  }
}
</style>
